// 点击关闭
// 获取点击按钮
const serFocusFrClose = document.querySelector('.serFocus-fr-close')
// 获取需要关闭的父系容器
const serFocusBgc =document.querySelector('.serFocus-bgcb')

    serFocusFrClose.addEventListener('click',function(){
            console.log(1);
            
        serFocusBgc.style.display='none'
    })

// 点击轮播图切换
// 获取圆点数组
const serFocusDianList = document.querySelectorAll('.serFocus-dian')
// 获取圆点数组的父元素
const serFocusDians = document.querySelector('.serFocus-dians')
// 获取关联图片区块
const  serFocusFrContent =document.querySelectorAll('.serFocus-fr-content')

for(let i=0;i<serFocusDianList.length;i++){
    serFocusDianList[i].addEventListener('click',function(){
        // 移除之前先判断是否有选中样式
        serFocusDians.querySelector('.dj')&&serFocusDians.querySelector('.dj').classList.remove('dj')
        // 对当前元素添加选中样式
        this.classList.add('dj')
        // 点击关联轮播图
        // 先 全隐 清除所有的切换内容显示状态为none
        serFocusFrContent.forEach((content) => {
            content.style.display = 'none';
        });
        // 在点选显示，点击对应序列的显示
        serFocusFrContent[i].style.display='block'
    })
}